new Vue({
    el: '#app',
    data() {
        return {
            isActive: '',
            form: { // 分页查询条件
                SQLSerialNumber: 't_acquisition_hall',
                PaginationNumber: 1,
                RowAmount: 10,
                Condition: utf8ToBase64('%%,%%'),
            },
            tableData: [],
            category: [],//类别
            total: 0,//总条数
            loading: false,// 节流阀门
            drawer: false,// 更多类别
        }
    },
    beforeCreate() {
        function setRem() {
            const designWidth = 750; // 设计稿宽度（rpx）
            const maxWidth = 540; // 可选：限制最大宽度（如手机端常见值）
            const screenWidth = Math.min(window.innerWidth, maxWidth);
            const scale = screenWidth / designWidth;
            document.documentElement.style.fontSize = scale + 'px';
        }
        setRem();//1rem = 0.5px 对标小程序在 375px 宽的屏幕上，1rpx = 0.5px（因为 750rpx / 375px = 2）
    },
    mounted() {
        this.init();
    },
    methods: {
        async init(callback) {
            await Promise.allSettled([
                this.getData(),
                this.getList(this.form),
            ]);
            callback ? callback() : null;
        },
        handleChange(item) { // 切换类别
            if (this.isActive == item.Category_SerialNumber || this.loading) return;//不能重复点击一样的类别
            this.isActive = item.Category_SerialNumber;
            this.form.PaginationNumber = 1; // 初始化
            this.form.Condition = utf8ToBase64(`%%,%${item.Category_SerialNumber}%`);
            this.tableData = [];
            this.getList(this.form);
        },
        handleDetail(item) {//跳转页面
            window.location.href = `../detail/purchase-detail.html?id=${item.Acquisition_Unit_Price_SerialNumber}`;
        },
        async getData() { // 查询品牌
            try {
                const data = await generalApi.generalQueryBySQLSerialNumberWithClient({
                    SQLSerialNumber: 'm_article_category_acquisition',
                });
                this.category = [{ Category_Name: '全部', Category_SerialNumber: '', }, ...data];
            } catch (error) {
                console.error(error);
            }
        },
        async getList(data) { // 分页查询
            if (this.loading) return;
            this.loading = true;//开启节流
            try {
                const res = await generalApi.generalPaginationQueryBySQLSerialNumberWithClient(data);
                this.tableData = [...this.tableData, ...res.Rows];
                this.total = res.TotalRows;
            } catch (error) {
                console.error(error);
            }
            this.loading = false;//关闭节流
        },
        handleScroll(e) { // 滚动监听
            const { scrollTop, clientHeight, scrollHeight } = e.target;
            if (scrollTop + clientHeight >= scrollHeight && !this.loading && this.tableData.length < this.total) {
                this.form.PaginationNumber ++;
                this.getList(this.form)
            }
        },

    },
})
